<template>
	<view class="sku-back">
        <view class="flex">
            <image class="sku-image" :src="uniConfig.ssoPath + props.goods.logo" mode="widthFix"></image>
            <view>
                <view class="title">{{ props.goods.name }}</view>
                <view class="sku-price"><text>￥</text>{{skuActive.sellPrice?skuActive.sellPrice:props.goods.price}}</view>
                <!-- <view class="sku-sales">已售：{{skuInfo.sales}}</view> -->
            </view>
        </view>
        <view class="title-text">规格</view>
        <view class="sku-item-box">
            <view class="sku-item" v-for="(item,index) in props.skus" :key="index">
                <view :class="skuActive.id==item.id?'sku-item-name-s':'sku-item-name-n'" @click="selectSkuItem(item)">
                    {{item.name}}
                </view>
            </view>
        </view>
        
        <view class="flex-center-sb sku-num">
            <view class="title-text">数量</view>
            <uv-number-box :min="1" :max="skuActive.maxBuyNum" button-size="30" :disabled="!skuActive.id" v-model="quantity"></uv-number-box>
        </view>
        <view class="sku-button">
            <view class="submitBt bg-line-color" @click="skuSubmit">{{ props.isAddCart?'加入购物车':'立即购买' }}</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref ,defineProps,watch,computed} from 'vue'
import { uniConfig } from '@/config/index'
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const member = computed(() => {
  return store.memberInfo
})
const emit = defineEmits([
    'change'
])
const props = defineProps({
    skus:{
        type:Array,
        default:[]
    },
    goods:{
        type:Object,
        default:{}
    },
    isAddCart:{
        type:Boolean,
        default:false
    }
})
const skuActive = ref<any>({})
watch(props.skus,(val) => {
        console.info('suk',val[0])
        skuActive.value = val[0]
    },
    {
        immediate: true
    }
)

const quantity = ref<any>(1)
const selectSkuItem = (index : any) => {
    skuActive.value = index
}
const checkLogin = () => {
  if(!member.value.mobile){
    //存储当前路由地址，授权完毕回调
    store.$patch((state) => {
        state.redirectPath = '/pages/milestones/index'
    })
    uni.redirectTo({
      url: '/pages/auth/index'
    })
    return false
  }else return true
}
const skuSubmit = () => {
    if(!checkLogin())return ;
    if(props.isAddCart){
        emit('change', {qty:quantity.value,skuId:skuActive.value.id})
        return
    }
    const confrimData = {
        quantity:quantity.value,
        sku:skuActive.value,
        productLogo:uniConfig.ssoPath + props.goods.logo,
        productName:props.goods.name,
        productId:props.goods.id
    }
    uni.setStorage({
        key: 'confrimData',
        data: confrimData
    })
    uni.navigateTo({
        url: `/pages/mall/detailConfirm?productId=${props.goods.id}`
    })
}
</script>
<style lang="scss">
.sku-back {
    padding: 42upx;
    .sku-image {
        width: 180rpx;
        height: 180rpx;
        border-radius:9px;
    }
    .title{
        font-size:32upx;
        font-weight: 600;
        padding:32upx;
    }
    .sku-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #F64D24;
        margin-left: 30rpx;

        text {
            font-size: 26rpx;
        }
    }

    .sku-sales {
        margin-top: 20rpx;
        margin-left: 30rpx;
        color: #666;
    }

    .title-text {
        font-weight: bold;
        font-size:26upx;
        margin-top: 42upx;
    }
    .sku-item-box{
        display: flex;
        align-items: center;
        flex-flow: wrap;
    }
    .sku-item {
        display: flex;
        margin-right:32upx;
        .sku-item-name-s {
            background-color: #F64D24;
            color: #fff;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            padding: 0 25rpx;
            border-radius: 30rpx;
            margin-top: 20rpx;
        }

        .sku-item-name-n {
            background-color: #eee;
            color: #666;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            padding: 0 25rpx;
            border-radius: 30rpx;
            margin-top: 20rpx;
        }
    }

    .sku-num {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .submitBt{
        position: fixed;
        bottom: 5%;
        width: 92%;
        left: 4%;
        height: 82rpx;
        text-align: center;
        line-height: 82rpx;
        border-radius: 42px;
        font-size: 32rpx;
        font-weight: 600;
        background: linear-gradient(90deg, #F20100 0%, #FD4E16 100%);
        color: #fff;
    }

    .sku-button {
        margin-top: 30rpx;
    }

    .add {
        background: linear-gradient(90deg, #F20100 0%, #FD4E16 100%);
        width: 45%;
    }

    .buy {
        background: linear-gradient(90deg, #FFA600 0%, #FFBB00 100%);
        width: 45%;
    }
}
</style>